<!DOCTYPE html>
<html>
<head>
    <title>Physics a-t Graph</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physics-graph" width="450" height="400"></canvas>

<script>
    const canvas = document.getElementById('physics-graph');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const originX = 70;
    const originY = 330;
    const graphWidth = 320;
    const graphHeight = 280;
    const arrowSize = 8;

    // Data points
    const tMax = 50;
    const aMax = 15;

    const scaleX = graphWidth / (tMax + 5); // Add some padding on the axis
    const scaleY = graphHeight / (aMax + 2);

    // --- Helper function to convert graph coordinates to canvas coordinates ---
    function t_to_x(t) {
        return originX + t * scaleX;
    }

    function a_to_y(a) {
        return originY - a * scaleY;
    }

    // --- Drawing Functions ---

    // Draw axes
    function drawAxes() {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // X-axis (time)
        ctx.moveTo(originX, originY);
        const xAxisEnd = t_to_x(tMax + 4);
        ctx.lineTo(xAxisEnd, originY);
        ctx.moveTo(xAxisEnd, originY);
        ctx.lineTo(xAxisEnd - arrowSize, originY - arrowSize / 2);
        ctx.moveTo(xAxisEnd, originY);
        ctx.lineTo(xAxisEnd - arrowSize, originY + arrowSize / 2);

        // Y-axis (acceleration)
        ctx.moveTo(originX, originY);
        const yAxisEnd = a_to_y(aMax + 2);
        ctx.lineTo(originX, yAxisEnd);
        ctx.moveTo(originX, yAxisEnd);
        ctx.lineTo(originX - arrowSize / 2, yAxisEnd + arrowSize);
        ctx.moveTo(originX, yAxisEnd);
        ctx.lineTo(originX + arrowSize / 2, yAxisEnd + arrowSize);

        ctx.stroke();
    }

    // Draw labels and ticks
    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.font = '16px Arial';

        // Axis labels
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        const supMinus = '\u207B'; // Superscript minus
        const supTwo = '\u00B2';   // Superscript two
        ctx.fillText(`a/(m·s${supMinus}${supTwo})`, originX + 10, a_to_y(aMax + 2));
        ctx.fillText('t/s', t_to_x(tMax + 4) + 5, originY);
        
        // Origin label
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('O', originX - 5, originY + 2);
        
        // Ticks and values
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('20', t_to_x(20), originY + 5);
        ctx.fillText('50', t_to_x(50), originY + 5);

        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('10', originX - 8, a_to_y(10));
        ctx.fillText('15', originX - 8, a_to_y(15));
    }

    // Draw the graph line and helper lines
    function drawGraph() {
        // Points on the graph
        const p0 = { x: t_to_x(0), y: a_to_y(0) };
        const p1 = { x: t_to_x(20), y: a_to_y(10) };
        const p2 = { x: t_to_x(50), y: a_to_y(15) };

        // Dashed helper lines
        ctx.beginPath();
        ctx.strokeStyle = '#555';
        ctx.lineWidth = 1;
        ctx.setLineDash([4, 4]);

        // Lines for point (20, 10)
        ctx.moveTo(p1.x, originY);
        ctx.lineTo(p1.x, p1.y);
        ctx.lineTo(originX, p1.y);

        // Lines for point (50, 15)
        ctx.moveTo(p2.x, originY);
        ctx.lineTo(p2.x, p2.y);
        ctx.lineTo(originX, p2.y);
        
        ctx.stroke();

        // Solid graph line
        ctx.beginPath();
        ctx.setLineDash([]); // Reset to solid line
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.moveTo(p0.x, p0.y);
        ctx.lineTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
    }
    
    // Draw the caption
    function drawCaption() {
        ctx.fillStyle = 'black';
        ctx.font = '20px "KaiTi", "SimSun", sans-serif'; // Use common Chinese fonts
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 1-5 图', canvas.width / 2, canvas.height - 10);
    }

    // --- Main drawing execution ---
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawAxes();
    drawLabels();
    drawGraph();
    drawCaption();

</script>

</body>
</html>